import React from 'react';
import ReactECharts from 'echarts-for-react';
import { useThemeStore } from '../../stores/themeStore';
import { getTheme } from '../../theme/config';

interface LineDataItem {
  name: string;
  value: number;
}

interface EChartsLineChartProps {
  data: LineDataItem[];
  title?: string;
  height?: number;
  color?: string;
}

const EChartsLineChart: React.FC<EChartsLineChartProps> = ({ 
  data, 
  title, 
  height = 300,
  color = '#1890ff'
}) => {
  const { mode } = useThemeStore();
  const theme = getTheme(mode);

  // ECharts 折线图配置
  const option = {
    title: {
      text: title,
      textStyle: {
        color: theme.textPrimary,
        fontSize: 16,
        fontWeight: '500'
      },
      left: 'center',
      top: 10
    },
    tooltip: {
      trigger: 'axis',
      textStyle: {
        color: mode === 'dark' ? '#fff' : '#000'
      }
    },
    xAxis: {
      type: 'category',
      data: data.map(item => item.name),
      axisLine: {
        lineStyle: {
          color: theme.textSecondary
        }
      },
      axisLabel: {
        color: theme.textSecondary
      }
    },
    yAxis: {
      type: 'value',
      axisLine: {
        lineStyle: {
          color: theme.textSecondary
        }
      },
      axisLabel: {
        color: theme.textSecondary
      },
      splitLine: {
        lineStyle: {
          color: mode === 'dark' ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)'
        }
      }
    },
    series: [{
      data: data.map(item => item.value),
      type: 'line',
      smooth: true,
      lineStyle: {
        color: color,
        width: 3
      },
      areaStyle: {
        color: color,
        opacity: 0.1
      },
      symbolSize: 6,
      itemStyle: {
        color: color
      },
      emphasis: {
        focus: 'series'
      }
    }],
    backgroundColor: 'transparent',
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    }
  };

  return (
    <div style={{ 
      height, 
      position: 'relative',
      padding: '20px',
      background: theme.cardBackground,
      borderRadius: '8px',
      border: `1px solid ${theme.cardBorder}`,
    }}>
      <ReactECharts 
        option={option} 
        style={{ height: '100%', width: '100%' }}
        theme={mode === 'dark' ? 'dark' : 'light'}
      />
    </div>
  );
};

export default EChartsLineChart;